<template>
<div>
       <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    border
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      prop="id"
      label="编号"
      width="120">
      <template></template>
    </el-table-column>
    <el-table-column
      prop="createDate"
      label="创建日期"
      width="120">
    </el-table-column>
    <el-table-column
      prop="outDepot"
      label="出库"
      show-overflow-tooltip>
    </el-table-column>
    <el-table-column
      prop="ohName"
      label="业务员"
      show-overflow-tooltip>
    </el-table-column>
    <el-table-column
      prop="amount"
      label="总金额"
      show-overflow-tooltip>
    </el-table-column>
        <el-table-column
      prop="outTime"
      label="出库时间"
      show-overflow-tooltip>
    </el-table-column>
    <el-table-column
      prop="uName"
      label="发起人"
      show-overflow-tooltip>
    </el-table-column>
    <el-table-column
      prop="aName"
      label="审批人"
      show-overflow-tooltip>
    </el-table-column>
    <el-table-column
      prop="state"
      label="状态"
      show-overflow-tooltip>
    </el-table-column>
    <el-table-column label="审批操作">
      <template>
        <el-button
          type="text" size="small"
          @click="handlecheck">审批</el-button>
      </template>
    </el-table-column>
    <el-table-column label="操作" >
      <template  slot-scope="scope" >
        <el-button
          type="text" size="small"
          @click="handleEdit">编辑</el-button>
          <el-button
          type="text" size="small"
          @click="handleView">预览</el-button>
          <el-button
          type="text" size="small"
          @click="handleDelete(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="page-wrap">
      <el-pagination
      background
      layout="prev, pager, next"
      :total="totalCount"
      class="page"
      @current-change="currentChange">
      </el-pagination>
  </div>
</div>           
</template>

<script>
import {dataListApi,deleteListApi} from '../../http/InventoryApi/OutApi'
export default {
  name:'OutList',
  data() {
    return {
      tableData:[],
      totalCount: 30,
      page: 1,
      size: 5,
    }
  },
  created() {
    this.getInit(this.page,this.size)
  },
  methods: {
    // 初始化表格
    getInit(page,size) {
      // 总数据获取
      // dataListCount()
      //  .then((res)=> {
      //    this.totalCount = res.data.data
      //  })
      //  .catch(err=> {
      //    console.log("获取数据总数出错",err)
      //  })
      //  根据页数数据渲染
      dataListApi(page,size) 
      .then(res => {
        this.tableData=res.data.data
        console.log(res)
      })
      .catch((err) => {
        console.log("获取分页总数出错：", err);
      });
    },
    // 换页
    currentChange(page) {
      this.page = page;

      this.getInit(page, this.size);
    },
    // 预览
    handleView() {
      this.$router.push('/outmangement/inventoryviewout')
    },
    // 审批意见
    handlecheck() {
      this.$prompt('审批意见', '审批', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        this.$message({
          type: 'success',
          message: '你的审批意见是: ' + value
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });       
      });
    },
    // 删除
    handleDelete(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(id)
        deleteListApi(id)
        .then(()=>{})
        .catch((err) => {
          console.log('删除失败：',err)
        })
        this.getInit(this.page,this.size)
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
  }
  }
}
</script>


<style lang="scss" scoped>
.page-wrap {
            height: 50px;
            width: 100%;
            .page {
            float: right;
            height: 50px;
            box-sizing: border-box;
            padding-top:8px
        }
        }
</style>